/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\CustomerManage\Customer\List\index2.tsx
 * @Date: 2023-05-26 15:47:20
 * @LastEditTime: 2023-05-31 17:07:23
 * @LastEditors: Setsuna
 */
import apis from '@/apis/CustomerManage'
import { UdPage, UdPageHeader, http } from '@/lib'
import classNames from 'classnames'
import * as React from 'react'
import './style.scss'
import DealerDataTable from './DealerDataTable/DealerDataTable'
import DistributorDataTable from './DistributorDataTable/DistributorDataTable'
import TerminalDataTable from './TerminalDataTable/TerminalDataTable'


export default class App extends React.Component<any, any> {
  state = {
    acctType: 0,
    dealerNumber: 0,
    specialNumber: 0,
    terminalNumber: 0,
  }
  render() {
    let { dealerNumber, specialNumber, terminalNumber, acctType } = this.state
    return (
      <UdPage className="list-page">
        <UdPageHeader title="客户管理" />
        <div className="todo-types">
          <div
            className={classNames('type-item', acctType === 0 && 'active')}
            onClick={() => this.handChangeAcctType(0)}
          >
            <div className="todo-title">经销商</div>
            <div className="todo-number">{dealerNumber}个</div>
          </div>
          <div
            className={classNames('type-item', acctType === 1 && 'active')}
            onClick={() => this.handChangeAcctType(1)}
          >
            <div className="todo-title">分销商</div>
            <div className="todo-number">{specialNumber}个</div>
          </div>
          <div
            className={classNames('type-item', acctType === 2 && 'active')}
            onClick={() => this.handChangeAcctType(2)}
          >
            <div className="todo-title">终端</div>
            <div className="todo-number">{terminalNumber}个</div>
          </div>
        </div>
        {acctType === 0 && <DealerDataTable />}
        {acctType === 1 && <DistributorDataTable />}
        {acctType === 2 && <TerminalDataTable />}
      </UdPage>
    )
  }

  componentDidMount(): void {
    this.getHeaderNumber()
  }
  //更改当前客户类型
  private handChangeAcctType = acctType => {
    this.setState({ acctType })
  }
  //获取客户类型数量
  private getHeaderNumber = () => {
    http.get(apis.ListNumber).then(res => {
      const { agentCount: dealerNumber, sagentCount: specialNumber, terminalCount: terminalNumber } = res.data
      this.setState({
        dealerNumber,
        specialNumber,
        terminalNumber,
      })
    })
  }
}
